<template>
  <el-header>
    <div style="width: 100%">
      <navigator></navigator>
    </div>
  </el-header>
  <el-container class="container">
    <el-aside>
      <h3 class="title">个人中心</h3>
      <el-menu
        :uniqueOpened="true"
        :default-active="$route.path"
        router
        class="el-menu-vertical-demo"
        background-color="#ffffff"
        text-color="#000000"
        active-text-color="#003399">
        <el-menu-item index="/basicInformation">
          <template #title>
            <span>基本信息</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/purse">
          <template #title>钱包</template>
        </el-menu-item>
        <el-menu-item index="/set">
          <template #title>设置</template>
        </el-menu-item>
        <el-menu-item index="/message">
          <template #title>消息提醒</template>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-main>
      <el-card class="card1">
        <template #header>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/purse' }">钱包</el-breadcrumb-item>
            <el-breadcrumb-item>账户</el-breadcrumb-item>
            <el-breadcrumb-item>交易记录</el-breadcrumb-item>
          </el-breadcrumb>
        </template>
        <el-table
          :data="orderParams"
          style="width: 100%">
          <el-table-column
            prop="payTime"
            label="消费日期"
            width="250"
          >
          </el-table-column>
          <el-table-column
            prop="orderId"
            label="订单号"
            width="140"
          >
          </el-table-column>
          <el-table-column
            prop="commodityId"
            label="商品名称"
          >
          </el-table-column>
          <el-table-column
            prop="goodsPrice"
            label="支付金额"
          >
          </el-table-column>
          <el-table-column
            prop="payWay"
            label="支付方式"
          >
          </el-table-column>
          <el-table-column
            prop="status"
            label="订单状态"
          >支付成功
          </el-table-column>
        </el-table>
      </el-card>
    </el-main>
  </el-container>
</template>

<script lang="ts" src="./transactionRecord.ts">

</script>

<style scoped>
.el-header{
  padding-inline-end: 0px;
  padding-inline-start: 0px;
}
.el-menu-vertical-demo{
  width: 250px;
  font-size: 30px;
}
.title{
  padding-left: 25px;
  width: 200px;
}
.card-header{
  font-size: 25px;
  padding-right: 1200px;
  width: 50px;
}
.card1{
  width: 900px;
  margin: 100px 100px;
  height: auto;
}
</style>
